<template>
    <div style="width: 100%">
        <h1>教学计划管理</h1>

<!--课程计划子弹窗 添加、修改弹窗-->
        <el-dialog custom-class="customWidth" :title="headerChildTitle"  :visible.sync="coursePlanSave">
            <el-form :model="coursePlanAddform" ref="coursePlanAddform" :rules="coursePlanAddRules">
                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="课程名称:" label-width="90" prop="course">
                            <el-select v-model="coursePlanAddform.course.id"  @change="handlerUpdataTeacherList(coursePlanAddform.course.id)"  filterable placeholder="请选择课程">
                                <el-option
                                        v-for="item in courses"
                                        :key="item.id"
                                        :label="item.courseName"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="任课教师名称:" label-width="90" prop="teacher">
                            <el-select v-model="coursePlanAddform.teacher.id"  filterable :disabled="disabledFlage" placeholder="请选择教师">
                                <el-option
                                        v-for="item in teacherList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="一周上课次数:" label-width="90" prop="weekCount">
                            <el-input v-model.number="coursePlanAddform.weekCount" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="权重:" label-width="90" prop="weight">
                            <el-input v-model.number="coursePlanAddform.weight" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="handleCoursePlanAddformReset">重置</el-button>
                <el-button @click="handleCourseCancel">取 消</el-button>
                <el-button type="primary" @click="handleCoursePlanAdd">确 定</el-button>
            </div>

        </el-dialog>

        <!--课程计划  添加、修改弹窗-->
        <el-dialog :title="headerTitle"  :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules"  ref="form">

                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="班级名称:" label-width="90">
                            <el-input  v-model="form.classesName" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="2" >
                        <el-form-item label="班级说明:" label-width="90" >
                            <el-input
                                    type="textarea"
                                    autosize
                                    placeholder="请输入内容"
                                    :disabled="true"
                                    v-model="form.info">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="2" >

                        <el-form-item label="课程安排:" label-width="90" >

                            <!-- 新添加的-->
                            <el-col :span="20" :offset="2" >

                                <div style="width: 100%;height: 50px; line-height: 50px">
                                    <el-tag>新添加的</el-tag>
                                </div>

                                <div v-for="(course,index) in newCourseList">
                                    <el-col :span="4" :offset="1">
                                        <div style="position: relative;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-bottom: 10px" >

                                            <el-image
                                                    style="width: 100%; height: 100%"
                                                    :src=course.course.pic>
                                            </el-image>
                                            <span style="display: block">{{course.course.courseName}}</span>
                                            <span style="display: block">{{course.teacher.name}}</span>

                                            <!--课程计划鼠标悬停-->
                                            <span class="coursePlan-icon" >
                                                <span @click="handlerUpdataCoursePlan(course,index,1)">
                                                  <i class="el-icon-edit"></i>
                                                </span>

                                                <span @click="handlerCourseDle(newCourseList,index,1)">
                                                  <i class="el-icon-delete"></i>
                                                </span>
                                             </span>
                                        </div>
                                    </el-col>
                                </div>
                                <el-col :span="5" :offset="1">
                                    <!--新增按钮-->
                                    <div class="coursePlanAdd" @click="handlerAddCoursePlan">
                                        <i class="el-icon-plus coursePlanAdd-icon"></i>
                                    </div>

                                </el-col>
                            </el-col>

                            <!--修改过的-->
                            <el-col :span="20" :offset="2" v-show="(updataCourseList&&updataCourseList.length)>0?true:false" >

                                <div style="width: 100%;height: 50px; line-height: 50px">
                                    <el-tag>原来修改后的</el-tag>
                                </div>

                                <div v-for="(course,index) in updataCourseList">
                                    <el-col :span="4" :offset="1">
                                        <div style="position: relative;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-bottom: 10px" >

                                            <el-image
                                                    style="width: 100%; height: 100%"
                                                    :src=course.course.pic>
                                            </el-image>
                                            <span style="display: block">{{course.course.courseName}}</span>
                                            <span style="display: block">{{course.teacher.name}}</span>

                                            <!--课程计划鼠标悬停-->
                                            <span class="coursePlan-icon" >
                                                <span @click="handlerUpdataCoursePlan(course,index,3)">
                                                  <i class="el-icon-edit"></i>
                                                </span>

                                                <span @click="handlerCourseDle(updataCourseList,index,3)">
                                                  <i class="el-icon-delete"></i>
                                                </span>
                                             </span>

                                        </div>
                                    </el-col>
                                </div>
                            </el-col>

                            <!--原来的-->
                            <el-col :span="20" :offset="2" v-show="(form.coursePlanList&&form.coursePlanList.length)>0?true:false">

                                <div style="width: 100%;height: 50px; line-height: 50px">
                                    <el-tag>原来的</el-tag>
                                </div>
                                <div v-for="(course,index) in form.coursePlanList">
                                    <el-col :span="4" :offset="1">
                                        <div style="position: relative;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-bottom: 10px" >

                                            <el-image
                                                    style="width: 100%; height: 100%"
                                                    :src=course.course.pic>
                                            </el-image>
                                            <span style="display: block">{{course.course.courseName}}</span>
                                            <span style="display: block">{{course.teacher.name}}</span>

                                            <!--课程计划鼠标悬停-->
                                            <span class="coursePlan-icon" >
                                                <span @click="handlerUpdataCoursePlan(course,index,2)">
                                                  <i class="el-icon-edit"></i>
                                                </span>

                                                <span @click="handlerCourseDle(form.coursePlanList,index,2)">
                                                  <i class="el-icon-delete"></i>
                                                </span>
                                             </span>

                                        </div>
                                    </el-col>
                                </div>

                            </el-col>

                        </el-form-item>

                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handlerSubmitCoursePlan">确 定 修 改</el-button>
            </div>

        </el-dialog>


        <!--模糊查询-->
         <!--<el-row :gutter="20">

           <el-col :span="3" :offset="8">

                <el-select v-model="student.sex"  placeholder="请选择性别">
                    <el-option label="全部" value="全部"></el-option>
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-col>

            <el-col :span="3">
                <el-select v-model="student.classesId"  filterable clearable placeholder="请选择班级">
                    <el-option
                            v-for="item in classesList"
                            :key="item.id"
                            :label="item.classesName"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span="3">
                <el-input
                        placeholder="请输入姓名"
                        v-model="student.name"
                        clearable
                >
                </el-input>
            </el-col>

            <el-col :span="1"><el-button type="primary" plain @click="handleClassesCourseList">搜索</el-button></el-col>
        </el-row>-->



        <!--列表-->
        <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="classesList"
                tooltip-effect="dark"
                style="width: 90%;margin: 0 auto"
                >


            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="coutrsePlan-table-expand">
                        <div v-for="coursePlan in props.row.coursePlanList" class="coutrsePlan"
                             style=" position: relative; width: 130px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
                        >
<!--                            <span>{{coursePlan}}</span>-->
<!--                            <el-form-item>-->
<!--                                <span>{{ props.row.name }}</span>-->
<!--                            </el-form-item>-->

                            <el-form-item style="width: 100%">
                                <el-image
                                        style="width: 100%; height: 100%"
                                        :src="coursePlan.course.pic"
                                        fit="['fill', 'contain', 'cover', 'none', 'scale-down']"></el-image>
                            </el-form-item>
                            <el-form-item>
                                <span>{{coursePlan.course.courseName}}</span>
<!--                                <span>{{coursePlan.course.pic}}</span>-->
                            </el-form-item>

                            <el-form-item>
                                <span>{{coursePlan.teacher.name}}</span>
                            </el-form-item>

                        </div>

                    </el-form>
                </template>
            </el-table-column>

<!--            <el-table-column-->
<!--                    type="selection"-->
<!--                    min-width="5%">-->
<!--            </el-table-column>-->

            <el-table-column
                    prop="classesName"
                    label="班级名称"
                    min-width="5%"
            >
            </el-table-column>

            <el-table-column
                    prop="coursePlanList.length"
                    label="课程数量"
                    min-width="5%"
            >
            </el-table-column>

            <el-table-column
                    label="最近一次修改时间"
                    sortable
                    min-width="5%"
                    prop="inputTime"
            >
                <template slot-scope="scope">
                    <span>{{scope.row.inputTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="操作"
                    min-width="5%"
            >
                <template slot-scope="scope">

                    <el-tooltip content="编辑" placement="top">
                        <el-button
                                type="primary"
                                size="mini"
                                icon="el-icon-edit"
                                @click="handlerChange(scope.$index,scope.row)"
                        >编辑</el-button>
                    </el-tooltip>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                :hide-on-single-page="true"
                @current-change="handleClassesCourseList"
        >
        </el-pagination>

    </div>

</template>

<script>
    export default {
        data() {
            const isNum = (rule, value, callback) => {
                const age= /^[0-9]*$/
                if (!age.test(value)) {
                    callback(new Error('只能填数字'))
                }else{
                    callback()
                }
            }

            return {


                //班级
                form: {

                },

                coursePlanAddform:{
                    teacher: {id:undefined,},
                    course:{id:undefined},
                },

                rules:{

                },

                coursePlanAddRules:{
                    course: [
                        { required: true, message: '请选择', trigger: 'change' }
                    ],
                    teacher: [
                        { required: true, message: '请选择', trigger: 'change' }
                    ],
                    weekCount: [
                        { required: true, message: '请输入上课次数', trigger: 'blur' },
                        { validator: isNum, trigger: 'blur' }
                    ],
                    weight: [
                        { required: true, message: '请输入权重', trigger: 'blur' },
                        { validator: isNum, trigger: 'blur' }
                    ],

                },


                pageNum:1,

                pageInfo: [],
                classesList: [],


                input:'',
                classes:{},

                //添加课程下拉框
                courses:[],
                teacherList:[],
                disabledFlage: true,
                headerChildTitle:'',

                //原来的修改过
                updataCourseList:[],

                //新添加
                newCourseList:[],

                //原来的删除
                dleCourseList:[],


                dialogFormVisible : false,
                coursePlanSave: false,

                loading: true,

                headerTitle:'',

                //新添加的修改按钮判断
                isAdd:true,
                //原来的修改按钮判断
                isFormer:true,
                //修改过的按钮判断
                isUpdata:true,

                //新添加/原来的/修改过的修改 记录数组索引
                arrayId:undefined,

            }

        },
        created() {
            this.handleClassesCourseList()

        },
        methods: {
            //列表 条件查询
            handleClassesCourseList(pageNum) {
                this.loading = true;
                if (typeof pageNum == "number") {
                    this.pageNum = pageNum;
                } else {
                    this.pageNum = 1;
                }

                // console.log(this.student)
                this.$axios.post("/manage/coursePlan/list", this.classes, {params: {pageNum: this.pageNum}}).then(response => {
                    this.pageInfo = response.data.pageInfo;
                    this.classesList = response.data.pageInfo.list;
                    // this.classesList = response.data.classesList;
                    // console.log(response)
                    this.loading = false;
                })
            },


            //计划重置
            handleCoursePlanAddformReset() {
                this.disabledFlage = true;
                this.coursePlanAddform = {
                    teacher: {id:undefined,},
                    course:{id:undefined},
                }
            },
            //计划添加/修改
            handleCoursePlanAdd(){
                this.$refs["coursePlanAddform"].validate(valid => {
                    if(valid){

                        // console.log(this.coursePlanAddform)
                        let courseId = this.coursePlanAddform.course.id;
                        let teacherId = this.coursePlanAddform.teacher.id;

                        let course;
                        let teacher;

                        this.courses.map(cour=>{
                            if(courseId==cour.id){
                                course=cour;
                            }
                        })

                        this.teacherList.map(teach => {
                            if(teacherId==teach.id){
                                teacher = teach;
                            }
                        })


                        let courseAdd = {
                            classId:'',
                            course:{
                                    id:'',
                                    courseName:''
                                },
                            courseId:'',
                           /* enable:null,
                            id:null,*/
                            teacher:{
                                id:'',
                                name:''
                                },
                            teacherId:'',
                            weekCount:'',
                            weight:''
                        }

                        let weekCount = this.coursePlanAddform.weekCount;
                        let weight = this.coursePlanAddform.weight;

                        courseAdd.classId = this.form.id;
                        courseAdd.course = course;
                        courseAdd.courseId = course.id;
                        courseAdd.teacher = teacher;
                        courseAdd.teacherId = teacher.id;
                        courseAdd.weekCount = weekCount;
                        courseAdd.weight = weight;

                        this.coursePlanAddform.course = course;
                        this.coursePlanAddform.teacher = teacher;
                        this.coursePlanAddform.teacherId = teacher.id;
                        this.coursePlanAddform.courseId = course.id;



                        if(!this.isAdd){


                            let oldCourse = this.newCourseList[this.arrayId];
                            let newCourse = this.coursePlanAddform;
                            let flag = true;

                            console.log(oldCourse);
                            console.log(newCourse);
                            oldCourse.teacherId!=newCourse.teacherId?flag=false:'';
                            oldCourse.courseId!=newCourse.courseId?flag=false:'';
                            oldCourse.weekCount!=newCourse.weekCount?flag=false:'';
                            oldCourse.weight!=newCourse.weight?flag=false:'';

                            if(!flag){
                                this.newCourseList[this.arrayId] = courseAdd;
                            }
                            else{
                                this.$message({
                                    message: '没有做任何修改',
                                    type: 'warning'
                                });
                            }

                            this.newCourseList[this.arrayId] = courseAdd;
                        }
                        else if(!this.isFormer){

                            let oldCourse = this.form.coursePlanList[this.arrayId];
                            let newCourse = this.coursePlanAddform;
                            let flag = true;

                            console.log(oldCourse);
                            console.log(newCourse);
                            oldCourse.teacherId!=newCourse.teacherId?flag=false:'';
                            oldCourse.courseId!=newCourse.courseId?flag=false:'';
                            oldCourse.weekCount!=newCourse.weekCount?flag=false:'';
                            oldCourse.weight!=newCourse.weight?flag=false:'';

                            if(!flag){
                                this.form.coursePlanList.splice(this.arrayId,1);
                                this.updataCourseList.push(JSON.parse(JSON.stringify(this.coursePlanAddform)))
                            }
                            else{
                                this.$message({
                                    message: '没有做任何修改',
                                    type: 'warning'
                                });
                            }

                        }
                        else if(!this.isUpdata){

                            let oldCourse = this.updataCourseList[this.arrayId];
                            let newCourse = this.coursePlanAddform;
                            let flag = true;

                            console.log(oldCourse);
                            console.log(newCourse);
                            oldCourse.teacherId!=newCourse.teacherId?flag=false:'';
                            oldCourse.courseId!=newCourse.courseId?flag=false:'';
                            oldCourse.weekCount!=newCourse.weekCount?flag=false:'';
                            oldCourse.weight!=newCourse.weight?flag=false:'';

                            if(!flag){
                                this.updataCourseList[this.arrayId] = JSON.parse(JSON.stringify(this.coursePlanAddform));
                            }
                            else{
                                this.$message({
                                    message: '没有做任何修改',
                                    type: 'warning'
                                });
                            }

                        }
                        else{
                            this.newCourseList.push(courseAdd);
                        }

                        this.coursePlanAddform = {
                            teacher: {id:undefined,},
                            course:{id:undefined},
                            };


                        this.coursePlanSave = false;

                        this.isAdd = true;
                        this.isFormer = true;
                        this.isUpdata = true;
                    }
                })

            },

            //添加如果存在修改的id清空
            handlerAddEstimate(){
                this.headerTitle="添加学生";
                if(this.form.id!=null){
                    this.form = {

                    };
                }
                this.dialogFormVisible = true;
            },

            //修改
            handlerChange(index, row) {

                this.$axios.get("/manage/coursePlan/findById/" + row.id).then(response => {
                    this.form = response.data.classes;

                    console.log("修改"+response);
                    this.headerTitle="修改计划";
                    this.dialogFormVisible = true;
                })

            },

            //修改 计划按钮
            handlerUpdataCoursePlan(course,index,number){
                if(number===1){
                    this.arrayId = index;
                    this.headerChildTitle = "修改计划";
                    this.coursePlanAddform = JSON.parse(JSON.stringify(course));
                    this.isAdd=false;
                    this.handlerFindcoursePlanList();
                }
                else if(number===2){
                    this.arrayId = index;
                    this.headerChildTitle = "修改计划";
                    this.coursePlanAddform = JSON.parse(JSON.stringify(course));
                    this.isFormer=false;
                    this.handlerFindcoursePlanList();
                }
                else if(number===3){
                    this.arrayId = index;
                    this.headerChildTitle = "修改计划";
                    this.coursePlanAddform = JSON.parse(JSON.stringify(course));
                    this.isUpdata=false;
                    this.handlerFindcoursePlanList();
                }

                this.coursePlanSave = true;
            },

            //取消按钮
            handleCourseCancel(){
                this.coursePlanAddform = {
                    teacher: {id:undefined,},
                    course:{id:undefined},
                };
                this.coursePlanSave = false;
            },

            //删除按钮
            handlerCourseDle(courseList,index,number){
                if(number==1){
                    courseList.splice(index,1);
                }
                else if(number==2){
                    this.dleCourseList.push(courseList[index].id);
                    courseList.splice(index,1);
                }
                else if(number==3){
                    this.dleCourseList.push(courseList[index].id);
                    courseList.splice(index,1);
                }

            },

            //点击新增按钮
            handlerAddCoursePlan(){
                this.isAdd=true;
                this.coursePlanAddform = {
                    teacher: {id:undefined,},
                    course:{id:undefined},
                };
                this.handlerFindcoursePlanList();
            },

            //点击新增/修改按钮 获取所有课程
            handlerFindcoursePlanList(){
                // this.headerChildTitle = "添加计划";
                // console.log(this.form.coursePlanList)
                let courseList;
                this.$axios.get("/manage/coursePlan/findAllCourse").then(response => {
                    courseList = response.data.courseList;
                    // console.log(this.form.coursePlanList)
                    this.courses=courseList.filter((item) => {
                        //设定一个布尔值
                        let flag = true;
                        //遍历原来的数组
                        this.form.coursePlanList.forEach(coursePlan => {
                            //如果相等  flag=false
                            // console.log(course.id === item.id)
                            if(!this.isFormer&&(coursePlan.course.id === item.id)){
                                if(this.coursePlanAddform.course.id==coursePlan.course.id&&(this.coursePlanAddform.course.id==item.id)){
                                    return  flag=true;
                                }
                            }
                            return coursePlan.course.id === item.id?flag=false:'';
                        })

                        //遍历新添加的数组
                        this.newCourseList.forEach(coursePlan => {
                            if (!this.isAdd&&( coursePlan.course.id === item.id)){
                                if(this.coursePlanAddform.course.id==coursePlan.course.id&&(this.coursePlanAddform.course.id==item.id)){
                                    return  flag=true;
                                }
                            }
                            return  coursePlan.course.id === item.id?flag=false:'';
                        })

                        //遍历修改过的数组
                        this.updataCourseList.forEach(coursePlan => {
                            if (!this.isUpdata&&( coursePlan.course.id === item.id)){
                                if(this.coursePlanAddform.course.id==coursePlan.course.id&&(this.coursePlanAddform.course.id==item.id)){
                                    return  flag=true;
                                }
                            }
                            return  coursePlan.course.id === item.id?flag=false:'';
                        })

                        return flag;
                    })

                    // if (!this.isAdd){
                    //     this.courses=courseList;
                    // }

                    //如果this.coursePlanAddform.id没有值 默认选第一个
                    if(typeof this.coursePlanAddform.id=='undefined'){
                        this.coursePlanAddform.course.id=this.courses[0].id;
                        this.handlerUpdataTeacherList(this.courses[0].id)
                    }
                    else {
                        this.handlerUpdataTeacherList(this.coursePlanAddform.course.id)
                    }
                    this.coursePlanSave=true
                });
            },
            //课程下拉列表更新后 获得教师
            handlerUpdataTeacherList(id){

                this.$axios.get("/manage/coursePlan/findCourseIdByTeacher/"+id).then(response => {
                    this.teacherList = response.data.teacherList;
                    this.disabledFlage = false;
                    if(typeof this.coursePlanAddform.teacher.id=='undefined'){
                        this.coursePlanAddform.teacher.id=this.teacherList[0].id;
                    }
                    else {
                        let flag = false;
                        this.teacherList.forEach(item => {
                            if(item.id===this.coursePlanAddform.teacher.id){
                                flag = true;
                            }
                        })
                        if(!flag){
                            this.coursePlanAddform.teacher.id=this.teacherList[0].id;
                        }
                    }
                })

            },

            //提交
            handlerSubmitCoursePlan() {
                this.$refs["form"].validate(valid => {
                    if (valid) {

                        //原来的修改过
                        let updataCourseList = this.updataCourseList;

                            //新添加
                        let newCourseList = this.newCourseList;

                        //原来的删除
                        let dleCourseList = this.dleCourseList;

                        if(updataCourseList.length>0||newCourseList.length>0||dleCourseList.length>0){
                            let data = {newCourseList,updataCourseList,dleCourseList}
                            this.$axios.post("/manage/coursePlan/save", data).then(response => {
                                if (response.code != 10001) {
                                    this.form = {

                                    };
                                    this.updataCourseList=[];
                                    this.newCourseList=[];
                                    this.dleCourseList=[];
                                    this.handleClassesCourseList(this.pageNum);
                                }
                            })
                        }
                        else {
                            this.$message({
                                message: '没有做任何修改',
                                type: 'warning'
                            });
                        }
                        this.dialogFormVisible = false;
                    }
                });
            },

        }
    }
</script>

<style>
    /*次级列表*/
    .coutrsePlan-table-expand {
        display: block;
        text-align: center;
    }
    .coutrsePlan-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .coutrsePlan-table-expand .coutrsePlan .el-form-item {
        /*margin-left: 5%;*/
        margin-bottom: 0;
        width: 50%;
        /*display: block;*/
    }
    .coutrsePlan{
        float: left;
        margin-left: 5%;

    }
    .coursePlan span{
        display: block;
        text-align: center;
    }
    .customWidth{
        width: 35% !important;
    }


    /*添加鼠标悬停按钮*/
    .coursePlan-icon{
        /*display:block;*/
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0,0,0,.5);
        transition: opacity .3s;
    }
    .coursePlan-icon span{
        margin: 10px;
        height: 100%;
        line-height: 165px;
        cursor: pointer
    }
    .coursePlan-icon:hover{
        opacity: 1;
    }



/*    添加按钮*/
    .coursePlanAdd {
        width: 100%;
        height: 150px;
        line-height: 150px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .coursePlanAdd:hover {
        border-color: #409EFF;
    }
    .coursePlanAdd-icon {
        font-size: 20px;
        color: #8c939d;
    }



</style>